<template>
	<view class="maintenance">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<uni-icons type="left" size="30" @click="HandleReturn" style="margin-right: 20rpx;"></uni-icons>
				<view>上传任务表单</view>
			</view>
			<!-- <view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="keyword" placeholder="搜索" />
				<view @click="search" class="search">搜索</view>
			</view> -->
		</view>
		<view class="updata-form">
			<!-- 基本信息 -->
			<view class="body-info">
				<view class="form-title">
					基本信息填写
				</view>
				<view class="form-body">
					<view class="form-item">
						<view class="form-label">记录编号</view>
						<up-input :customStyle="{height: '40rpx'}" border="none">
							<template #suffix>
								<text class='placeholder'>请输入</text>
							</template>
						</up-input>
					</view>
					<view class="form-item">
						<text class="form-label">委托单位</text>
						<up-input :customStyle="{height: '40rpx'}" border="none">
							<template #suffix>
								<text class='placeholder'>请输入</text>
							</template>
						</up-input>
					</view>
					<view class="form-item">
						<text class="form-label">维护单位</text>
						<up-input :customStyle="{height: '40rpx'}" border="none">
							<template #suffix>
								<text class='placeholder'>请输入</text>
							</template>
						</up-input>
					</view>
					<view class="form-item">
						<text class="form-label">维护月份</text>
						<up-input :customStyle="{height: '40rpx'}" border="none">
							<template #suffix>
								<text class='placeholder'>请输入</text>
							</template>
						</up-input>
					</view>
				</view>
			</view>
		</view>
		<button class="next" @click="next">下一步</button>
	</view>
</template>

<script setup>
	import toSafe from '@/compoents/top-safe.vue'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	onMounted(() => {})
	// 建筑信息列表
	const tableData = reactive([{
		text: "A", //显示
		value: "" // 值
	}])
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	const next = () => {
		uni.navigateTo({
			url: '/pages/tasks/fire'
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.maintenance {
		width: 100%;
		height: 100vh;
		background: #F6F8FA;

		.searchInput {
			width: 100%;
			height: 6vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {
				.inline_center();
				height: 88rpx;
				width: 100%;
				// display: flex;
				// align-items: center;

				view {
					width: 100%;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}

		}

		.updata-form {
			padding: 20rpx 28rpx;
			height: calc(100% - 6vh);

			.body-info {
				width: 100%;
				height: 400rpx;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;

				.form-title {
					height: 60rpx;
					font-size: 28rpx;
					font-weight: 700;
					border-bottom: 1px solid #f6f6f6;
				}

				.form-body {
					.inline_column_space_between();
					font-size: 28rpx;
					height: 300rpx;
					padding-top: 20rpx;

					.form-item {
						height: 40rpx;
						width: 100%;
						margin-top: 10rpx;
						.inline_space_between();

						.form-label {
							margin-right: 60rpx;
						}

						.placeholder {
							color: #999;
							opacity: 0.8;
						}
					}
				}
			}

		}

		.next {
			position: fixed;
			bottom: 30rpx;
			// bottom: 12;
			width: 90vw;
			background-color: #325EF5;
			color: #fff;
			border-radius: 16rpx;
			margin: auto;
			z-index: 1;
			left: 50%;
			transform: translateX(-50%);
		}



		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}


		.uni-list {
			height: 80rpx;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>